<template>
	<view>
		<view class="home-window-header">
			<view class="home-window-header-title">
				<view class="home-window-header-main-title home-chat-body-title" @click="editTitle">
					{{ curTitle[curSelectIndex] ? curTitle[curSelectIndex].topic : "" }}
				</view>
				<view class="home-window-header-sub-title">与 ChatGPT 的
					{{
						curTitle[curSelectIndex] && curTitle[curSelectIndex].messages ? curTitle[curSelectIndex].messages.length : 0
					}} 条对话
				</view>
			</view>
			<view class="home-window-actions">
				<view class="home-window-action-button" v-if="!showSideBarButton">
					<button class="button-icon-button button-border clickable" title="查看消息列表" @click="clickSidebarPopup(1)">
						<view class="button-icon-button-icon">
							<uni-icons type="undo" size="20"></uni-icons>
						</view>
					</button>
				</view>
				<view class="home-window-action-button">
					<button class="button-icon-button button-border clickable" role="button" @click="editTitle">
						<view class="button-icon-button-icon">
							<uni-icons custom-prefix="iconfont" type="icon-bianji" size="20"></uni-icons>
						</view>
					</button>
				</view>
				<view class="home-window-action-button">
					<button class="button-icon-button button-border clickable" role="button" title="导出聊天记录">
						<view class="button-icon-button-icon">
							<uni-icons type="redo" size="20"></uni-icons>
						</view>
					</button>
				</view>
				<view class="home-window-action-button" :class="{'home-mobile' : fullScreen}">
					<button class="button-icon-button button-border clickable" role="button" @click="clickFullScreen(1)">
						<view class="button-icon-button-icon">
							<uni-icons custom-prefix="iconfont" type="icon-quanping" size="20"></uni-icons>
						</view>
					</button>
				</view>
				<view class="home-window-action-button" :class="{'home-mobile' : !fullScreen}">
					<button class="button-icon-button button-border clickable" role="button" @click="clickFullScreen(2)">
						<view class="button-icon-button-icon">
							<uni-icons custom-prefix="iconfont" type="icon-tuichuquanping" size="20"></uni-icons>
						</view>
					</button>
				</view>
			</view>
			<view class="chat-prompt-toast">
				<view class="chat-prompt-toast-inner clickable">
					<uni-icons custom-prefix="iconfont" type="icon-renxiang"></uni-icons>
					<span class="chat-prompt-toast-content">已设置 {{
							curTitle[curSelectIndex]
							&& curTitle[curSelectIndex].context ? curTitle[curSelectIndex].context.length : 0
						}} 条前置上下文</span>
				</view>
			</view>
		</view>
		<u-modal :show="modelShow" :title="modelTitle" :focus="modelFocus" @confirm="clickModelConfirm"
		         :showCancelButton="showCancelButton" :closeOnClickOverlay="closeOnClickOverlay"
		         @cancel="clickModelCancel" @close="clickModelCancel">
			<view class="slot-content">
				<u-input placeholder="请输入新的标题" v-model="modelNewTitle" border="bottom"/>
			</view>
		</u-modal>
	</view>
</template>

<script>

export default {
	emits: ["editTitle", "clickFullScreen", "clickSidebarPopup"],
	props: {
		curTitle: {
			type: Array
		},
		curSelectIndex: {
			type: Number
		},
		fullScreen: {
			type: Boolean,
			default: () => {
				return false;
			}
		},
		showSideBarButton: {
			type: Boolean
		}
	},
	data() {
		return {
			modelShow: false,
			modelTitle: "重命名对话",
			modelFocus: true,
			showCancelButton: true,
			closeOnClickOverlay: true,
			modelNewTitle: ""
		};
	},
	created() {
	},
	methods: {
		editTitle() {
			this.modelShow = true;
		},
		clickModelConfirm() {
			if (this.modelNewTitle && this.modelNewTitle !== this.curTitle.title) {
				this.curTitle.title = this.modelNewTitle;
			}
			this.$emit('editTitle', this.modelNewTitle);
			this.clickModelCancel();
		},
		clickModelCancel() {
			this.modelShow = false;
		},
		clickFullScreen(type) {
			this.$emit("clickFullScreen", type);
		},
		clickSidebarPopup(type) {
			this.$emit("clickSidebarPopup", type);
		},
	}
}
</script>

<style lang="scss">

@import "../css/chat.scss";

.home-window-header {
	padding: 14px 20px;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.home-window-header-title {
	max-width: calc(100% - 100px);
	overflow: hidden;
}

.home-window-header-title .home-window-header-main-title {
	font-size: 20px;
	font-weight: 900;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
	max-width: 50vw;
}

.home-chat-body-title {
	cursor: pointer;
}

.home-chat-body-title:hover {
	text-decoration: underline;
}

.home-window-header-title .home-window-header-sub-title {
	font-size: 14px;
	margin-top: 5px;
}

.home-window-actions {
	display: inline-flex;
}

.home-window-action-button {
	margin-left: 10px;
}

.chat-prompt-toast {
	position: absolute;
	bottom: -50px;
	z-index: 999;
	display: flex;
	justify-content: center;
	width: calc(100% - 40px);
}

.chat-prompt-toast-inner {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	background-color: $white;
	color: $black;
	border: $border-in-light;
	box-shadow: $card-shadow;
	padding: 10px 20px;
	border-radius: 50px;
	animation: chat-slide-in-from-top .3s ease;
}

.chat-prompt-toast-content {
	margin-left: 10px;
	height: 17px;
}

</style>